<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理后台</title>
    <link rel="stylesheet" href="./css/houtai.css">
    <link rel="stylesheet" href="./css/houtai_gzt.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

    <!-- 引入jQuery -->
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
    <script src="./assets/jquery.min.js"></script>
    <!-- 引入 ECharts 库 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script> -->
    <script src="./assets/echarts.min.js"></script>
    <!-- 引入toastr -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

</head>
<body>
    <div class="wrapper">
        <!-- 侧边栏 -->
        <aside class="sidebar">
            <div class="logo">
                <h2>超市管理系统</h2>
            </div>
            <ul class="menu">
                <li><a href="./houtai_gzt.html" class="menuItem active"><i class="fas fa-tachometer-alt"></i><span>工作台</span></a></li>
                <li><a href="./houtai_user.html" class="menuItem"><i class="fas fa-users"></i><span>用户管理</span></a></li>
                <li><a href="./houtai_product.html" class="menuItem"><i class="fas fa-box"></i><span>商品管理</span></a></li>
                <li><a href="./houtai_order.html" class="menuItem"><i class="fas fa-shopping-cart"></i><span>订单管理</span></a></li>
                <li><a href="./houtai_stock.html" class="menuItem"><i class="fas fa-warehouse"></i><span>库存管理</span></a></li>
                <li><a href="./houtai_log.html" class="menuItem"><i class="fas fa-history"></i><span>日志记录</span></a></li>
            </ul>
        </aside>

        <!-- 主体部分 -->
        <main class="main-content">
            <header class="header">
                <a id="collapse" href="javascript:void(0)">
                    <i class="fas fa-bars"></i>
                </a>
                <div class="header-title">工作台</div>
                <div class="user-info">
                    <span>欢迎，管理员</span>
                    <button id="logoutBtn">退出</button>
                </div>
            </header>

            <!-- 统计卡片 -->
            <div class="stat-cards">
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-shopping-cart"></i>
                    </div>
                    <div class="stat-info">
                        <h3>今日订单</h3>
                        <p id="todayOrderCount">0</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-yen-sign"></i>
                    </div>
                    <div class="stat-info">
                        <h3>今日销售额</h3>
                        <p id="todaySales">￥0.00</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-users"></i>
                    </div>
                    <div class="stat-info">
                        <h3>总用户数</h3>
                        <p id="totalUserCount">0</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-box"></i>
                    </div>
                    <div class="stat-info">
                        <h3>总商品数</h3>
                        <p id="totalProductCount">0</p>
                    </div>
                </div>
            </div>

            <!-- 图表区域 -->
            <section class="charts">
                <!-- 主图表：近7天销售额趋势 -->
                <div id="main_one" class="chart" style="width: 100%; height: 400px;"></div>
                
                <!-- 副图表 -->
                <div class="sub-charts">
                    <!-- 分类商品数量统计 -->
                    <div id="main_two" class="chart" style="width: 100%; height: 400px;"></div>
                    <!-- 热销商品TOP10 -->
                    <div id="main_three" class="chart" style="width: 100%; height: 400px;"></div>
                </div>
            </section>
        </main>
    </div>

    <script src="./js/houtai.js"></script>
    <script src="./js/houtai_echarts_one.js"></script>
    <script src="./js/houtai_echarts_two.js"></script>
    <script src="./js/houtai_echarts_three.js"></script>
    <script>
        // 更新统计卡片数据
        function updateStatCards(data) {
            document.getElementById('todayOrderCount').textContent = data.todayOrderCount || 0;
            document.getElementById('todaySales').textContent = '￥' + (data.todaySales || 0).toFixed(2);
            document.getElementById('totalUserCount').textContent = data.totalUserCount || 0;
            document.getElementById('totalProductCount').textContent = data.totalProductCount || 0;
        }

        // 获取工作台数据并更新所有图表
        function fetchAndUpdateDashboard() {
            const token = localStorage.getItem('token');
            if (!token) {
                window.location.href = 'login.html';
                return;
            }

            $.ajax({
                url: `${BASE_API}/dashboard/data`,
                type: 'GET',
                headers: {
                    'token': token
                },
                success: function(result) {
                    if (result.code === 200) {
                        const data = result.data;
                        // 更新统计卡片
                        updateStatCards(data);
                        // 更新图表
                        renderChartOne(data.last7DaysSales);
                        renderChartTwo(data.categoryProductCount);
                        renderChartThree(data.topSellingProducts);
                    } else if (result.code === -2) {
                        window.location.href = 'login.html';
                    } else {
                        toastr.error(result.msg || '获取数据失败');
                    }
                },
                error: function() {
                    toastr.error('获取数据失败，请检查网络连接');
                }
            });
        }

        // 页面加载完成后获取数据
        document.addEventListener('DOMContentLoaded', fetchAndUpdateDashboard);

        // 每5分钟自动刷新一次数据
        setInterval(fetchAndUpdateDashboard, 5 * 60 * 1000);
    </script>
</body>
</html>
